<template>
    <div>
        <div class="plate" ref="plate">
            <!-- <header class="header">
                <div class="header-title">园区管理</div>
                <img class="header-img" src="@/assets/three/image/header.png">
            </header> -->
            <ZdyHeader title="园区管理" />
            <div class="left-content animate__animated animate__fadeInLeft">
                <div class="content">
                    <div class="card left-card-1">
                        <img class="background" src="@/assets/three/image/parkManagement/left-card-1-background.png"
                            alt="">

                        <div class="card-header">
                            <div class="title">
                                <div class="text">值班人员</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="on-duty-personnel">
                            <div class=" item tabel-header">
                                <div class="name"> 姓名</div>
                                <div class="phone"> 手机号码</div>
                                <div class="flights"> 班次</div>
                                <div class="time"> 起止时间</div>
                            </div>
                            <div class=" item" v-for="(item, index) in scheduleData" :key="index">
                                <div class="name"> {{ item.name }}</div>
                                <div class="phone"> {{ item.phone }}</div>
                                <div class="flights">
                                    <div
                                        :class="['tag', item.shift == '早班' ? 'tag-early' : item.shift == '中班' ? 'tag-zho' : 'tag-late']">
                                        {{ item.shift }}
                                    </div>
                                </div>
                                <div class="time"> {{ item.timeRange }}</div>
                            </div>
                        </div>
                        <div class="card-header">
                            <div class="title">
                                <div class="text">成本构成分析</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="eCharts">
                            <ECharts :option="costOptions" />
                        </div>
                    </div>
                    <div class="card left-card-2">
                        <img class="background" src="@/assets/three/image/parkManagement/left-card-2-background.png"
                            alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">视频监控</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="video-surveillance">
                            <div class="video-item">
                                <video-player
                                    src="https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4"
                                    class="video" poster="/your-path/poster.jpg" controls :loop="true" :volume="0.6" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-content animate__animated animate__fadeInRight">
                <div class="content">
                    <div class="card right-card-1">
                        <img class="background" src="@/assets/three/image/parkManagement/right-card-1-background.png"
                            alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">能耗分析</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="energy-consumption-analysis">
                            <div class="item">
                                <div>
                                    <Statistic :value="energyConsumptionAnalysis.totalEnergyConsumption"
                                        :valueStyle="{ color: '#61C5FF', fontSize: '22px' }" suffix="kWh"
                                        :suffixStyle="{ fontSize: '16px', color: '#61C5FF', fontWeight: 'bold' }" />
                                </div>
                                <div class="label">
                                    总能耗消耗
                                </div>
                                <div class="msg">
                                    较上月同期
                                </div>
                            </div>
                            <div class="item">
                                <div>
                                    <Statistic :value="energyConsumptionAnalysis.chainRatio"
                                        :valueStyle="{ color: energyConsumptionAnalysis.chainRatioPositive ? '#35DF4A' : '#D43030', fontSize: '22px' }"
                                        suffix="%" :prefix="energyConsumptionAnalysis.chainRatioPositive ? '+' : '-'"
                                        :prefixStyle="{ fontSize: '20px', color: energyConsumptionAnalysis.chainRatioPositive ? '#35DF4A' : '#D43030', fontWeight: 'bold' }"
                                        :suffixStyle="{ fontSize: '16px', color: energyConsumptionAnalysis.chainRatioPositive ? '#35DF4A' : '#D43030', fontWeight: 'bold' }" />
                                </div>
                                <div class="label">
                                    环比变化率
                                </div>
                                <div class="msg">
                                    较上月同期
                                </div>
                            </div>
                            <div class="item">
                                <div>
                                    <Statistic :value="energyConsumptionAnalysis.yearOverYearRatio"
                                        :valueStyle="{ color: energyConsumptionAnalysis.yearOverYearRatioPositive ? '#35DF4A' : '#D43030', fontSize: '22px' }"
                                        suffix="%"
                                        :prefix="energyConsumptionAnalysis.yearOverYearRatioPositive ? '+' : '-'"
                                        :prefixStyle="{ fontSize: '20px', color: energyConsumptionAnalysis.yearOverYearRatioPositive ? '#35DF4A' : '#D43030', fontWeight: 'bold' }"
                                        :suffixStyle="{ fontSize: '16px', color: energyConsumptionAnalysis.yearOverYearRatioPositive ? '#35DF4A' : '#D43030', fontWeight: 'bold' }" />
                                </div>
                                <div class="label">
                                    同比变化率
                                </div>
                                <div class="msg">
                                    较上月同期
                                </div>
                            </div>

                        </div>
                        <div class="analyze">
                            能耗趋势分析
                        </div>
                        <div class="analyze-chart">
                            <ECharts :option="analyzeOption" />
                        </div>
                    </div>
                    <div class="card right-card-2">
                        <img class="background" src="@/assets/three/image/parkManagement/right-card-2-background.png"
                            alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">门禁记录</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="access-control-records">
                            <div class=" item tabel-header">
                                <div class="name"> 姓名</div>
                                <div class="addre"> 位置</div>
                                <div class="time"> 时间</div>
                            </div>
                            <div class=" item" v-for="(item, index) in accessControlRecords" :key="index">
                                <div class="name"> {{ item.name }}</div>
                                <div class="addre"> {{ item.location }}</div>
                                <div class="time"> {{ item.time }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import ECharts from '@/components/ECharts';
import Statistic from '@/components/Statistic';
import * as echarts from 'echarts';
import 'animate.css/animate.min.css';
import { onMounted } from 'vue';
import ZdyHeader from '@/components/ZdyHeader';
import { listDutyPerson, getCostConstructionAnalysis, getEnergyConsumptionAnalysis, getEnergyConsumptionTrendAnalysis, listAccessControlRecord } from '@/api/park/cockpit';
import { ref } from 'vue';

const scheduleData = ref([]);
const energyConsumptionAnalysis = ref({});

const accessControlRecords = ref([]);

const costOptions = ref(null);

const analyzeOption = ref(null);

onMounted(() => {
    listDutyPerson().then(res => {
        scheduleData.value = res.data;
    })
    getCostConstructionAnalysis().then(res => {
        console.log(res);

        costOptions.value = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                top: 'center',
                itemWidth: 16,
                itemHeight: 10,
                itemGap: 10,
                textStyle: {
                    color: '#fff'
                },
                data: res.data.map(item => item.name)
            },
            series: [{
                name: '成本分布',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: res.data
            }],
            grid: {
                left: '',
                right: '18%',
                bottom: '2%',
                containLabel: true
            }
        };
    })
    getEnergyConsumptionAnalysis().then(res => {
        energyConsumptionAnalysis.value = res.data;
    })
    getEnergyConsumptionTrendAnalysis().then(res => {
        console.log(res, '====');

        // analyzeOption.value = {
        //     tooltip: {
        //         trigger: 'axis',
        //         axisPointer: { type: 'shadow' }
        //     },
        //     legend: {
        //         data: ['出水能耗', '出水趋势', '进水趋势'],
        //         top: '5%',
        //         textStyle: { color: '#fff' }
        //     },
        //     xAxis: {
        //         type: 'category',
        //         data: ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06', '06-07'],
        //         axisLine: { lineStyle: { color: '#fff' } },
        //     },
        //     yAxis: [
        //         {
        //             type: 'value',
        //             name: '能耗量(KWh)',
        //             min: 0,
        //             nameTextStyle: {
        //                 color: '#FFFFFF',
        //                 fontSize: 12,
        //             },
        //             max: 1500,
        //             axisLabel: { color: '#fff' }
        //         },
        //         {
        //             type: 'value',
        //             name: '变化率(%)',
        //             min: -4,
        //             nameTextStyle: {
        //                 color: '#E34646',
        //                 fontSize: 12,
        //             },
        //             max: 6,
        //             position: 'right',
        //             axisLabel: { formatter: '{value}%', color: '#E34646' }
        //         }
        //     ],
        //     series: [
        //         {
        //             name: '出水能耗',
        //             data: [600, 1400, 1300, 800, 900, 1000, 300],
        //             type: 'bar',
        //             barWidth: '35%',
        //             itemStyle: {
        //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                     { offset: 0, color: '#23bcfb' },
        //                     { offset: 1, color: 'rgba(0, 191, 165, 0)' }
        //                 ]),
        //                 barBorderRadius: [10, 10, 0, 0]
        //             },
        //         },
        //         {
        //             name: '出水趋势',
        //             type: 'line',
        //             data: [600, 1400, 1300, 800, 900, 1000, 300],
        //             yAxisIndex: 0,
        //             itemStyle: { color: '#35DF4A' },
        //         },
        //         {
        //             name: '进水趋势',
        //             type: 'line',
        //             yAxisIndex: 1,
        //             data: [2, -1, 3, -2, 1, 2, -3],
        //             itemStyle: { color: '#FF0000' },
        //         }
        //     ],
        //     grid: { left: '15%', right: '10%', top: '24%' }
        // };
        analyzeOption.value = {
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['出水能耗'],
                top: '5%',
                textStyle: { color: '#fff' }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res.data.timetimePeriodsList,
                axisLabel: {
                    color: '#FFFFFF' // 设置X轴标签文字颜色为白色
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '能耗量(KWh)',
                    min: 0,
                    nameTextStyle: {
                        color: '#FFFFFF',
                        fontSize: 12,
                    },
                    axisLabel: { color: '#fff' }
                },
                {
                    type: 'value',
                    name: '变化率(%)',
                    nameTextStyle: {
                        color: '#E34646',
                        fontSize: 12,
                    },
                    position: 'right',
                    axisLabel: { formatter: '{value}%', color: '#E34646' }
                }
            ],
            series: [
                {
                    name: '出水能耗',
                    type: 'line',
                    data: res.data.energyValues,
                    itemStyle: { color: '#35DF4A' },
                },
            ],
            grid: { left: '12%', right: '10%', top: '24%' }
        };
    })
    listAccessControlRecord().then((res) => {
        accessControlRecords.value = res.data;
    })
})
</script>

<style lang="scss" scoped>
@import "@/assets/styles/three-home.scss";

.left-card-1 {
    height: 580px !important;

    .on-duty-personnel {
        box-sizing: border-box;
        padding: 0 30px;

        .item {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin: 12px 0;
            color: #fff;
            align-items: center;

            >div {
                // flex: 1;
                text-align: center;
                font-size: 14px;
            }

            .name {
                width: 50px !important;
            }

            .flights {
                display: flex;
                justify-content: center;
            }

            .flights .tag {
                width: 40px;
                height: 20px;
                border-radius: 4px;
                border: 1px solid red;
                font-size: 12px;
                color: red;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .tag-early {
                border: 1px solid #0A91FF !important;
                color: #0A91FF !important;
            }

            .tag-zho {
                border: 1px solid #FF8D1A !important;
                color: #FF8D1A !important;
            }

            .tag-late {
                border: 1px solid #E34646 !important;
                color: #E34646 !important;
            }

            .name {}
        }

        .tabel-header {
            color: #37DBED !important;
            font-size: 14px;
        }
    }

    :deep(.chart-container) {
        height: 260px !important;
        padding-right: 40px;
    }
}

.left-card-2 {
    height: 280px !important;

    .video-surveillance {
        height: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
    }

    .video-item {
        width: 100%;
        height: 100%;
        aspect-ratio: 16/9;
    }

    .video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.right-card-1 {
    height: 490px !important;

    .energy-consumption-analysis {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 12px 0;

            .label {
                font-size: 16px;
                color: #FFF;
                margin: 10px 0;
                text-align: center;
            }

            .msg {
                color: #989fb5;
                font-size: 12px;
                text-align: center;
            }
        }
    }

    .analyze {
        font-size: 14px;
        color: #fff;
        margin-top: 10px;
        margin-left: 30px;
    }

    :deep(.chart-container) {
        height: 310px !important;
    }
}

.right-card-2 {
    height: 370px !important;

    .access-control-records {
        box-sizing: border-box;
        padding-right: 10px;

        .item {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin: 14px 0;
            color: #fff;
            align-items: center;
            margin-right: 10px;

            >div {
                flex: 1;
                text-align: center;
                font-size: 14px;
            }

            .time {
                flex: 1.5;
            }
        }

        .tabel-header {
            color: #37DBED !important;
            font-size: 14px;
        }
    }
}
</style>